<template>
	<main class="login">
		<header>
			<img src="../assets/images/icon_arrow_top.png" alt="">
			<button>CONNECT WITH FACEBOOK</button>
		</header>
		<section>
			<h1>SIGN IN</h1>
			<label for="email">Email</label>
			<div class="content">
				<input type="email" v-model="email">
				<span class="close" v-if="email" @click="email=''">x</span>
			</div>
			<label for="password">Password</label>
			<div class="content">
				<input type="password" v-model="password">
				<span class="close" v-if="password" @click="password=''">x</span>
			</div>
			<span class="findpwd">Forget your password?</span>
		</section>
		<footer @click="login()">
			SIGN IN
		</footer>
	</main>
</template>
<script>
export default{
	name:'login',
	data(){
		return{
			email:'',
			password:'',
		}
	},
	methods:{
		login(){
			console.log('login...');
			this.$router.push({name:'favorites'});
		}
	}
}
</script>
<style lang="scss">
main.login{
	text-align:center;
	>header{
		>img{
			width:1.066667rem;
			height:1.066667rem;
			display:block;
			margin:0.88rem auto 1.066667rem auto;
		}
		>button{
			outline:none;
			border:none;
			color:#fff;
			height:2.346667rem;
			width:13.866667rem;
			border-radius:44px;
			background-image:-webkit-linear-gradient(45deg,#6a409f 0%,#901eb1 100%);
		}
	}
	>section{
		text-align:left;
		margin-top:1.066667rem;
		border-top:1px solid #ebebeb;
		padding:1.066667rem 1.6rem 1.6rem 1.6rem;
		>h1{
			display:block;
			margin:0 auto 2.4rem auto;
			width:6.049rem;
			padding-bottom:0.533333rem;
			border-bottom:4px solid #363636;
		}
		>label{
			margin-top:0.8rem;
			display:inline-block;
			font-size:0.533333rem;
			color:#6f6f6f;			
		}
		>div.content{
			position:relative;
		}
		input{
			display:block;
			outline:none;
			border:none;
			width:100%;
			padding:0.533333rem 0;
			border-bottom:1px solid #ebebeb;
			letter-spacing:1px;
			font-size:0.8rem;
			color:#363636;
		}
		span{
			display:block;
			&.findpwd{
				text-align:center;
				font-size:0.64rem;
				color:#6f6f6f;
				margin-top:2.826667rem;
			}
			&.close{
				font-size:0.32rem;
				width:1.12rem;
				height:1.12rem;
				border-radius:50%;
				text-align:center;
				color:#fff;
				position:absolute;
				right:0;
				top:5px;
				background-color:#b8b8b8;
			}
		}
	}
	>footer{
		position:absolute;
		bottom:0;
		width:100%;
		color:#fff;
		height:2.666667rem;
		line-height:2.666667rem;
		background-color: #fd4c9d;
	}
}
</style>